<template>
  <div class="m-fight-main-detail">
    <!-- 拼单商品主订单详情 -->

    <div class="fight-order clearfix">
      <!-- 拼单信息 -->
      <div class="main-left fl">
        <w-mange-title title="拼单信息"></w-mange-title>
        <div class="fight-info">
          <div>
            <span class="title">拼单结束时间</span>
            <span>{{mainInfo.fightGoodsEndTime}}</span>
            <!-- <w-date-picker language="ch" placeholder="起始时间"></w-date-picker> -->
          </div>
          <div>
            <span class="title">商品类型</span>
            <w-radio name="type" label="1" :disabled="mainInfo.goodsNumType != '1'" v-model="mainInfo.goodsNumType">现货</w-radio>
            <w-radio name="type" label="0" :disabled="mainInfo.goodsNumType != '0'" v-model="mainInfo.goodsNumType">期货</w-radio>
          </div>
        </div>

        <w-mange-title title="拼单参数"></w-mange-title>
        <div class="fight-prams">
          <table class="table">
            <thead>
              <tr>
                <th>颜色</th>
                <th>颜色最低发货量</th>
                <th>尺码</th>
                <th>采购商最低起订量</th>
                <th>颜色已拼发货量</th>
              </tr>
            </thead>
            <sku-group v-for="(spec, index) in goodsGsp" :key="index" :already="true" :readonly="true" :specs="spec"></sku-group>
          </table>

          <div class="fight-lauch">
            <span>拼单总发货量：{{mainInfo.crowdfundingCount || 0}}件</span>
          </div>
          <!-- <div class="fr">
            <span class="t-under btn-t">修改拼单规则</span>
          </div> -->
        </div>

      </div>
      <!-- 拼单状态 -->
      <div class="main-right">
        <div class="order-status">
          <div class="clearfix">
            <div class="icon-status fl">
              <img src="../../assets/dingdanzhuantai.png" alt="">
            </div>
            <div class="order-del fr">
              <h4 class="status" v-if="mainInfo.isAlready == '0'">拼单中...</h4>
              <h4 class="status" v-if="mainInfo.isAlready == '1'">拼单成功</h4>
              <h4 class="status" v-if="mainInfo.isAlready == '-1'">拼单失败</h4>
              <div v-if="timer && mainInfo.isAlready == '0'">
                <div class="cutdowm-time">
                  <h2>剩余
                    <span style="color:#0A5BFF" v-if="mainInfo.nowDate && mainInfo.fightGoodsEndTime">
                      <w-count-down :start="mainInfo.nowDate" :target="mainInfo.fightGoodsEndTime" @on-timer="onTimer"></w-count-down>
                    </span>
                    <span v-else>--天--时--分--秒</span>
                  处理时间</h2>
                </div>
                <span class="tip">剩余时间不处理且未满足成功条件，将会自动设置为失败</span>
              </div>
              <div class="order-main-id">主订单号：{{mainInfo.orderId || '--'}}</div>
            </div>
          </div>
          <div class="order-btns">
            <w-button type="option" v-if="mainInfo.isAlready == '0'" @on-click="onUpdateStatus('1')">设置成功</w-button>
            <w-button type="option" v-if="mainInfo.isAlready == '0'" style="margin: 0 28px;" @on-click="onUpdateStatus('-1')">设置失败</w-button>
            <w-button type="option" @on-click="$router.push(`/order?origin=fight&mainid=${mainInfo.orderFormId}`)">查看子订单</w-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单列表 -->
    <div class="order-list">
      <w-table :columns="columns">
        <tr>
          <td>
            <div class="goods-info clearfix">
              <div class="goods-img fl">
                <img v-lazy="mainInfo.mainPhotoPath" alt="">
              </div>
              <div class="goods-name fl">
                <p class="p-line-hide">{{mainInfo.goodsName || '--'}} {{mainInfo.freightNumber}}</p>
              </div>
            </div>
          </td>
          <td class="store-info">
            <span>{{mainInfo.storeName || '--'}}</span>
            <br>
            <span>商家手机号：{{mainInfo.storeTelephone || '--'}}</span>
          </td>
          <!-- <td>
            <span class="lauch">{{mainInfo.consignor | consignor}}</span>
          </td> -->
        </tr>
      </w-table>
    </div>

  </div>
</template>

<script>
import SkuGroup from '../fightAlone/common/SkuGroup'
import { apiOrderMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      columns: [
        {title: '商品', width: '40%'},
        {title: '商家信息', width: '30%'}
      ],
      timer: true, // 定时器
      mainInfo: {},
      goodsGsp: [] // 规则
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    if (!this.$route.params.ruleid || this.$route.params.ruleid == '') return
    // 获取拼单详情
    this.fetchOrderInfo()
  },
  methods: {
    fetchOrderInfo() {
      apiOrderMange.apiFMOrderInfo(this.token, this.$route.params.ruleid).then(data => {
        this.mainInfo = data.bean || {}
        this.goodsGsp = JSON.parse(this.mainInfo.goodsGsp || '[]')
      })
    },
    /**
     * 手动设置拼单结果
     * @param status: 1,成功；-1，失败
     */
    onUpdateStatus(status) {
      const tip = status == '1' ? '确定设置该拼单状态为‘成功’？' : '确定设置该拼单状态为‘失败’？'
      let _this = this
      this.$modal({
        content: tip,
        onConfirm() {
          apiOrderMange.apiFMOrderUpdateStatus(_this.token, _this.$route.params.ruleid, status).then(data => {
            _this.$toast('设置操作成功', () => {
              _this.fetchOrderInfo()
            })
          })
        }
      })
    },
    /**
     * 清除定时器
     */
    onTimer() {
      this.timer = false
    }
  },
  components: {
    'sku-group': SkuGroup
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.main-left {
  width: 520px;
  border-right: 1px solid $border-gray-light;
  padding-right: 10px;
}
.t-under {
  text-decoration: underline;
  margin-right: 18px;
  cursor: pointer;
}
.btn-t {
  color: rgba(74,144,226,1);
}
.fight-order {
  padding-bottom: 24px;
  padding-top: 16px;
  border-bottom: 1px solid $border-gray-light;
}
.fight-info {
  padding-left: 14px;
  div:first-child {
    margin-bottom: 10px;
  }
  .title {
    width: 100px;
    display: inline-block;
  }
}
.fight-prams {
  table {
    border: 1px solid #DBDBDB;
    font-size: 12px;
    tr {
      th {
        height: 40px;
        border: none;
        background:rgba(242,242,242,1);
        font-weight: bold
      }
      td {
        text-align: center;
        height: 50px;
        border-right: 1px solid #DBDBDB;
      }
      td:nth-child(1) {
        width: 60px;
      }
      td:nth-child(2) {
        width: 120px;
      }
      td:nth-child(3) {
        width: 48px;
        border-right: none
      }
      td:nth-child(4) {
        width: 120px;
      }
      td:nth-child(5) {
        width: 138px;
      }
    }
  }
}
.fight-lauch {
  margin: 20px 0 0px;
  .fight-all {
    width: 112px;
    display: inline-block;
    margin: 0 8px;
  }
}
.main-right {
  width: 668px;
  display: inline-flex;
}
.order-status {
  margin: auto;
  .icon-status {
    margin-right: 10px
  }
  .status {
    display: inline-block;
    vertical-align: -webkit-baseline-middle;
  }
  .cutdowm-time {
    margin-top: 10px;
  }
}
.tip {
  color: #4A4A4A;
  font-size: 12px;
}
.order-main-id {
  margin-top: 10px;
  font-weight: 600;
  line-height: 26px;
}
.order-btns {
  text-align: center;
  margin-top: 20px;
}
.order-list {
  margin-top: 40px;
  margin-bottom: 10px;
  .goods-info {
    padding: 10px;
    .goods-img {
      width: 88px;
      height: 88px;
    }
    .goods-name {
      display: inline-block;
      margin-left: 10px;
      max-width: 300px;
      p {
        text-overflow: ellipsis;
        white-space: normal;
      }
    }
  }
  .store-info {
    span {
      font-size: 12px;
      &:first-child {
        font-weight: bold
      }
    }
  }
  .lauch {
    font-weight: bold;
    font-size: 14px;
  }
}
</style>
